<template>
  <el-main style="padding:0 20px;">
    <el-descriptions :column="2" border>
      <el-descriptions-item label="请求地址">{{ form.action }}</el-descriptions-item>
      <el-descriptions-item label="请求方式">{{ form.method }}</el-descriptions-item>
      <el-descriptions-item label="请求状态">
        <el-tag v-if="form.status" type="success">成功</el-tag>
        <el-tag v-if="!form.status" type="danger">失败</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="业务类型">
        <el-tag v-if="form.type === 'ADD'" type="primary">新增</el-tag>
        <el-tag v-if="form.type === 'DEL'" type="danger">删除</el-tag>
        <el-tag v-if="form.type === 'EDIT'" type="warning">修改</el-tag>
        <el-tag v-if="form.type === 'QUERY'" type="success">查询</el-tag>
        <el-tag v-if="form.type === 'OTHER'" type="info">其他</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="请求发起人">{{ form.userName }}</el-descriptions-item>
      <el-descriptions-item label="请求耗时">{{ form.duration }}（ms）</el-descriptions-item>
      <el-descriptions-item label="请求处理模块">{{ form.module }}</el-descriptions-item>
      <el-descriptions-item label="请求处理方法">{{ form.handle }}</el-descriptions-item>
      <el-descriptions-item label="请求人IP">{{ form.address }}</el-descriptions-item>
      <el-descriptions-item label="IP归属地">{{ form.location }}</el-descriptions-item>
      <el-descriptions-item label="请求浏览器">{{ form.browser }}</el-descriptions-item>
      <el-descriptions-item label="请求操作系统">{{ form.system }}</el-descriptions-item>
      <el-descriptions-item label="请求发起时间">{{ form.createTime }}</el-descriptions-item>
      <el-descriptions-item label="备注">{{ form.remark }}</el-descriptions-item>
    </el-descriptions>
    <el-collapse style="margin-top: 20px;">
      <el-collapse-item title="请求参数" name="1">
        <vue-json-pretty v-model:data="data.param"
                         :show-icon="true"
                         :show-double-quotes="true"
                         :show-line="true"
                         :show-length="true"
                         :show-line-number="true"
                         :editable="false"
                         :editable-trigger="('click')"
        ></vue-json-pretty>
      </el-collapse-item>
      <el-collapse-item v-if="form.status" title="请求返回结果" name="2">
        <vue-json-pretty v-model:data="data.result"
                         :show-icon="true"
                         :show-double-quotes="true"
                         :show-line="true"
                         :show-length="true"
                         :show-line-number="true"
                         :editable="false"
                         :editable-trigger="('click')"></vue-json-pretty>
      </el-collapse-item>
      <el-collapse-item v-else title="请求异常信息" name="2">
        <vue-json-pretty v-model:data="data.exception"
                         :show-icon="true"
                         :show-double-quotes="true"
                         :show-line="true"
                         :show-length="true"
                         :show-line-number="true"
                         :editable="false"
                         :editable-trigger="('click')"></vue-json-pretty>
      </el-collapse-item>
    </el-collapse>
  </el-main>
</template>

<script setup lang="js">
import "vue-json-pretty/lib/styles.css";
import VueJsonPretty from "vue-json-pretty";
import {reactive} from "vue";

const props = defineProps({
  form: {
    type: Object,
    default: {}
  }
})

const data = reactive({
  param: JSON.parse(props.form.param),
  result: props.form.status ? JSON.parse(props.form.result) : {},
  exception: props.form.status ? {} : JSON.parse(props.form.exception),
});
</script>
